<template>
  <div id="leader" style="margin:0 auto">
    <mu-container style="padding:0;margin:0;">
      <mu-bottom-nav color="red300" :value="bottomNav">
        <mu-bottom-nav-item
          title="首页"
          icon="sensor_door"
          to="/home"
          value="home"
        ></mu-bottom-nav-item>
        <mu-bottom-nav-item
          title="速览"
          icon="favorite"
          to="/quick"
          value="quick"
        ></mu-bottom-nav-item>
        <mu-bottom-nav-item
          title="资金"
          icon="poll"
          to="/fund"
          value="fund"
        ></mu-bottom-nav-item>
        <mu-bottom-nav-item
          title="我的"
          icon="person_pin"
          to="/mine"
          value="mine"
        ></mu-bottom-nav-item>
      </mu-bottom-nav>
    </mu-container>
  </div>
</template>
<script>
export default {
  data () {
    return {
      bottomNav: 'home'
    }
  },
  created () {
    this.getNavValue()
  },
  watch: {
    '$route': 'getNavValue'
  },
  methods: {
    goTo (path) {
      this.$router.replace(path)
    },
    getNavValue () {
      // 随便起一个名字
      // 这里要根据你自己路由的名称，指定与之对应的bottomNav值
      if (this.$route.path === '/home') {
        this.bottomNav = 'home'
      }
      if (this.$route.path === '/quick') {
        this.bottomNav = 'quick'
      }
      if (this.$route.path === '/fund') {
        this.bottomNav = 'fund'
      }
      if (this.$route.path === '/mine') {
        this.bottomNav = 'mine'
      }
    }
  }
}
</script>
<style scoped>
#leader {
  height: 100%;
  width: 100%;
}
</style>
